<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>流程图</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/include/css/style.css">
  <link rel="stylesheet" href="/static/js/jquery-qtip/jquery.qtip.css">
  <style>
    .opinionStatus {
      margin-top: 5px;
      margin-left: 30px;
    }

    .qtip-content {
      min-width: 240px;
    }

    #flowImage {
      margin: 25px 10px
    }
  </style>
</head>
<body class="white-bg" style="height: 95%">

<!-- 这部分是canvas需要用到的图标 -->
<span id="userIcon" class="hide">&#xf007;</span>
<span id="mutiUserIcon" class="hide">&#xf0c0;</span>
<!-- <span id="mutiInstIcon" class="hide">&#xf005;</span> -->
<span id="mutiInstIcon" class="hide">&#xf0e8;</span>
<span id="dynamicTaskIcon" class="hide">&#xf02c;</span>
<span id="timerIcon" class="hide">&#xf017;</span>
<span id="serviceIcon" class="hide">&#xf013;</span>
<span id="removeIcon" class="hide">&#xf00d;</span>
<span id="plusIcon" class="hide">&#xf0fe;</span>
<span id="upIcon" class="hide">&#xf0d8;</span>
<span id="endErrorIcon" class="hide">&#xf0f1;</span>
<span id="boundaryErrorIcon" class="hide">&#xf0e7;</span>
<span id="endIcon" class="hide">&#xf111;</span>


<canvas id="flowImageCanvas"></canvas> <!-- 这是新版的canvas图片 -->


<div id="imageInfoBox">

</div>

<div style="display: none;" id="imageOpinionBox">

</div>

<img id="flowImage" src="" alt="">

<script src="/static/include/js/footer.js"></script>
<script src="/static/js/jquery-qtip/jquery.qtip.js"></script>
<script src="/static/js/flow/arrow.js"></script>
<script src="/static/js/flow/flow.js"></script>
<!--<script src="/static/js/flow/jcanvas.js"></script>-->
<script src="/static/js/flow/step.js"></script>
<script src="/static/js/flow/flowCanvas.js"></script>
<script src="/static/js/flow/drawCanvas.js"></script>
<script type="text/javascript">
  var instanceId, defId, taskId;
  var clickNode = null
  instanceId = getQueryString('instanceId') ? getQueryString('instanceId') : '';
  defId = getQueryString('defId') ? getQueryString('defId') : '';
  taskId = getQueryString('taskId') ? getQueryString('taskId') : '';

  var opinionConfig = {
    awaiting_check: {name: '待审批', color: "#ed4014", icon: "fa-spinner fa-pulse"},
    agree: {name: '同意', color: "#19be6b", icon: "fa-check-circle"},
    oppose: {name: '反对', color: "#ff9900", icon: "fa-close"},
    abandon: {name: '弃权', icon: "fa-unlink", color: "#808695"},
    reject: {name: '驳回', icon: "fa-reply", color: "#ff9900"},
    rejectToStart: {name: '驳回到发起人', icon: "fa-reply-all", color: "#ff9900"},
    revoke: {name: '撤销', icon: "fa-hand-stop-o", color: "#ed4014"},
    recall: {name: '撤回', icon: "fa-reply", color: "#ff9900"},
    revoker_to_start: {name: '撤回到发起人', icon: "fa-reply-all", color: "#ff9900"},
    signPass: {name: '会签通过', icon: "fa-check-circle", color: "#3c763d"},
    signNotPass: {name: '会签反对', icon: "fa-close", color: "#ed4014"},
    signRecycle: {name: '会签回收', icon: "fa-check-circle", color: "#3c763d"},
    skip: {name: '跳过执行', icon: "fa-arrow-circle-right", color: "#3c763d"},
    manualEnd: {name: '人工终止', icon: "fa-ioxhost", color: "#ed4014"},
    cancelled: {name: '任务取消', icon: "fa-arrow-circle-right", color: "#808695"},
    carbonCopy: {name: '抄送审阅', color: "#19be6b", icon: "fa-check-circle"},
    recycle: {name: '任务回收', icon: "fa-reply", color: "#ff9900"},
  }

  function getStyle(layout) {
    // ie11只支持ng-style json对象.
    var xDom = layout.domxoffset ? (layout.x - layout.domxoffset) : (layout.x + 10)
    var yDom = layout.domyoffset ? (layout.y - layout.domyoffset) : (layout.y + 25)
    var styleStr = "position:absolute;left:" + xDom + "px;top:" + yDom + "px;width:" + (layout.width) + "px;height:" + (layout.height) + "px;border-radius:5px;";
    if (isIE) { //ie10及以下浏览器添加了绝对定位的元素，绑定事件无效，需要添加背景色。

      if (isIE8){
        styleStr += "background:url(about:blank)"

      }else{
        styleStr += "background:rgba(255,255,255,0);"
      }

    }
    return styleStr
    /*return {
      "position": "absolute",
      "left": (layout.x - layout.domxoffset) + "px",
      "top": (layout.y - layout.domyoffset) + "px",
      "width": (layout.width) + "px",
      "height": (layout.height) + "px",
      "border-radiu": "5px",
    }*/
  }

  function init() {

    var data = {
      instanceId: instanceId,
      defId: defId,
      taskId: taskId
    }
    $.ajax({
      url: api + '/scabpm/bpm/instance/getFlowImageInfo',
      data: data,
      type: 'post',
      success: function (res) {
        var result = JSON.parse(res).data

        var flowImageCanvas = new flowCanvas(null, "flowImageCanvas", result);
        if (!isIE8) {
          var drawFn = flowImageCanvas.initDraw();
          drawFn.drawFlowImage(); // 重构后的代码
          clickNode = function (params) {
            drawFn.clickNode(params);
          }
        } else {
          flowImageCanvas.initDraw()
        }

        var nodeMap = result.nodeMap
        var opinionMap = result.opinionMap

        Object.keys(nodeMap).forEach(function (key) {
          var layout = nodeMap[key]

          //imageInfoBox框
          var fnData = {node: layout, fn: result.flowFn}
          $('#imageInfoBox').append($('<div/>', {
            id: "node" + key,
            'class': "flowNode pointer " + layout.type,
            style: getStyle(layout),
          }).click(function () {
            if (!isIE8) drawFn.clickNode(fnData);
          }))


          //imageOpinionBox框
          $('#imageOpinionBox').append($('<div/>', {
            id: key
          }))


          if (opinionMap[key] && opinionMap[key].length) {
            opinionMap[key].forEach(function (opinion, index) {


              //imageInfoBox框
              var config = opinionConfig[opinion.status]
              if ((index === opinionMap[key].length - 1 && !opinion.signId) || opinion.assignInfo === '所有会签用户') {
                var outEle = $('<div/>', {
                  test: opinion.status
                })
                if (config) {
                  outEle.append('<div class="opinionStatus" style="color:' + config.color + '">' +
                    '<span class="fa ' + config.icon + '"></span>' + config.name +
                    '</div>')
                }
                $('#node' + key).append(outEle)
              }


              //imageOpinionBox框
              if (!(opinion.assignInfo === '所有会签用户' && !opinion.approveTime)) {

                var outEle = $('<div><ul class="list-group"><a class="list-group-item"></a></ul></div>')
                var configInfo = config ? config : {name: '', icon: "", color: ""}
                var name = opinion.approverName ? opinion.approverName : ''
                outEle.find('.list-group-item').append('<h4 class="list-group-item-heading">' + name +
                  '<span style="margin-left: 10px;color:' + configInfo.color + '">' +
                  '<span class="fa ' + configInfo.icon + '"></span>' + configInfo.name +
                  '</span>' +
                  '</h4>')

                if (opinion.status != 'awaiting_check') {
                  var durFlag = opinion.durMs ? 'inline' : 'none'
                  outEle.find('.list-group-item').append('<p class="list-group-item-text">' +
                    '<label>审批意见：</label> ' + opinion.opinion + ' <br/>' +
                    '<label>操作时间：</label> ' + (opinion.approveTime ? opinion.approveTime : '') + '<br/> ' +
                    '<span style="display: ' + durFlag + '"> <label>处理用时：</label>' + getTimeLag(opinion.durMs) + '</span>' +
                    '</p>')
                }

                if (opinion.status == 'awaiting_check') {
                  outEle.find('.list-group-item').append('<p class="list-group-item-text">' +
                    '<label>任务候选人：</label> ' + assignInfo(opinion.assignInfo) + ' <br/>' +
                    '<label>创建时间：</label> ' + opinion.createTime + '<br/> ' +
                    '</p>')
                }


                $('#' + key).append(outEle)

              }


            })
          }
        })


      }
    });
  }

  $(function () {
    $.ajax({
      url: api + '/scabpm/bpm/instance/getInstanceAndChildren',
      data: {id: instanceId},
      type: 'post',
      success: function (res) {

      }
    });


    if (isIE8) {
      $('#flowImage').attr('src', api + '/scabpm/bpm/instance/flowImage?instId=' + instanceId + '&defId=' + defId + '&taskId=' + taskId)
    }

    init()


  })

  function getTimeLag(difference, level) {
    if (!difference) {
      return "";
    }
    var r = "",
      ////计算出相差天数
      days = Math.floor(difference / (24 * 3600 * 1000)),
      //计算出小时数
      leave1 = difference % (24 * 3600 * 1000),   //计算天数后剩余的毫秒数
      hours = Math.floor(leave1 / (3600 * 1000)),
      //计算相差分钟数
      leave2 = leave1 % (3600 * 1000),      //计算小时数后剩余的毫秒数
      minutes = Math.floor(leave2 / (60 * 1000)),
      //计算相差秒数
      leave3 = leave2 % (60 * 1000),    //计算分钟数后剩余的毫秒数
      seconds = Math.round(leave3 / 1000);

    if (isNaN(level)) {
      level = 2;
    }
    if (days > 0) {
      level--;
      r += days + "天";
      if (level == 0) return r;
    }
    if (hours > 0) {
      level--;
      r += hours + "时";
      if (level == 0) return r;
    }
    if (minutes > 0) {
      level--;
      r += minutes + "分";
      if (level == 0) return r;
    }
    if (seconds > 0) {
      level--;
      r += seconds + "秒";
      if (level == 0) return r;
    }

    if (r) {
      return r;
    }

    if (leave3) {
      return difference + "毫秒";
    }

    return ""
  }

  function assignInfo(info) {
    if (!info) {
      return "";
    }
    var msg = "";
    info.split(",").forEach(function (item) {
      if (!item) {
        return;
      }
      if (msg) {
        msg += "；";
      }
      var strs = item.split("-");
      var typeName = "";
      if (strs[0] === "user") {
        typeName = "[用户]";
      } else if (strs[0] === "role") {
        typeName = "[角色]";
      } else if (strs[0] === "group") {
        typeName = "[组]";
      } else if (strs[0] === "org") {
        typeName = "[组织]";
      } else if (strs[0] === "post") {
        typeName = "[岗位]";
        if (strs[2]) {
          return msg += typeName + strs[1] + "-" + strs[2];
        }
      } else if (strs[0] === "job") {
        typeName = "[职称]";
      }
      msg += typeName + strs[1];
    });
    return msg;
  }
</script>
</body>
</html>
